<template>
    <pos-dialog title="Add Note" width="40%" :visible="visible" @close="close">
        <div class="form-group">
            <div class="form-input-label">Add a note to this order</div>
            <div>
                <textarea class="form-control" rows="5" v-model="content"></textarea>
            </div>
        </div>
        <div class="form-group">
            <button type="button" role="button" class="btn btn-primary btn-block text-uppercase" @click="submit">save note
            </button>
        </div>
    </pos-dialog>
</template>

<script>
export default {
    name: "DialogNote",
    props: {
        value: false,
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    data() {
        return {
            visible: false,
            content: ''
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        submit() {
            this.$emit('submit', this.content);
            this.$emit('input', false);
        }
    }
}
</script>

<style scoped>

</style>